<template>
  <div class="container">
    <!--    顶部的全局属性-->
    <HospitalTop></HospitalTop>
    <!--    将来展示路由组件的区域-->
    <div class="content">
      <!--      展示路由组件的区域-->
      <router-view></router-view>
    </div>
    <!--    底部的全局属性-->
    <HospitalBottom></HospitalBottom>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.container {
  // 这里表示整个大的元素设置成弹性盒，垂直排列进行居中
  display: flex;
  flex-direction: column;
  align-items: center;

  .content {
    // 设置下面是因为，我们上面的顶部会把下面的区域给挡上，我们上面顶部高度是70，我们设置这个和顶边的距离，就可以正好显示出来
    margin-top: 70px;
    width: 1200px;
    // 这是设置这个高度不能小于700px
    min-height: 700px;
  }
}
</style>
